import 'scss/city.scss'
import React from 'react'
import { totalConfig, propName } from 'config/templateConfig'
import { panelPop } from 'views/panelPop'
import { buildPop } from 'views/buildPop'

let resourceConfig = totalConfig.resource

export default React.createClass({
    getInitialState() {
        return { resources: [], npc: [], map: {} }
    },
    collection(resourceId) {
        let resourceInfo = resourceConfig[resourceId]
        let prop = resourceInfo.prop
        let player = window.player
        player.bag.addItem(prop)
    },
    openPanel(npcId) {
        panelPop.openPanel('npc', { npcId: npcId })
    },
    build(buildId) {
        buildPop.openPanel(buildId)
    },
    battle() {

    },
    render() {
        let self = this
        let mapId = this.props.params.id
        let map = totalConfig.map[mapId]
        let resourcesNode, npcNode, dungeonNode, buildingNode
        if (map.resources) {
            let node = map.resources.map(function (item) {
                return <div key={item}><button onClick={self.collection.bind(self, item)}>{propName[item]}</button></div>
            })
            resourcesNode = <div>
                <div>资源</div>
                <div className="flex wrap">{node}</div>
            </div>
        }

        if (map.dungeons) {
            let node = map.dungeons.map(function (item) {
                return <div key={item}><button onClick={self.battle.bind(self, item)}>{propName[item]}</button></div>
            })
            dungeonNode = <div>
                <div>副本</div>
                <div className="flex wrap">{node}</div>
            </div>
        }

        if (map.npc) {
            let node = map.npc.map(function (item) {
                return <div key={item}><button onClick={self.openPanel.bind(self, item)}>{propName[item]}</button></div>
            })
            npcNode = <div>
                <div>npc</div>
                <div className="flex wrap">{node}</div>
            </div>
        }

        if (map.building) {
            let node = map.building.map(function (item) {
                return <div key={item}><button onClick={self.build.bind(self, item)}>{propName[item]}</button></div>
            })
            buildingNode = <div>
                <div>建筑</div>
                <div className="flex wrap">{node}</div>
            </div>
        }

        return <div id='map'>
            <div className='head'>
                <div className='title'>{map.name}</div>
                <div className='desc'>{map.desc}</div>
            </div>
            <div>{buildingNode}{resourcesNode}{dungeonNode}{npcNode}</div>
        </div>
    }
})
